<template>
  <!-- 业务员提成主页面 -->
  <app-container>
    <app-block>
      <h3 class="salesman-commission__h3">业务员提成</h3>
      <div>
        <zm-form :model="searchForm" ref="searchFormRef" inline>
          <zm-form-item prop="month">
            <zm-date-picker
              v-model="searchForm.month"
              type="month"
              value-format="yyyy-MM"
              placeholder="选择月"
            />
          </zm-form-item>
          <zm-form-item label prop="apartmentId">
            <el-cascader
              placeholder="所属部门"
              :props="props"
              v-model="apartmentId"
              :options="apartmentLists"
              clearable
              class="w200"
              @change="apartmentChange"
            />
          </zm-form-item>
          <zm-form-item label prop="salemanId">
            <zm-data-select
              v-model="searchForm.salemanId"
              :list="getSaleLists"
              placeholder="选择业务员"
              class="w200"
            ></zm-data-select>
          </zm-form-item>
          <zm-form-item>
            <zm-button @click="onSearch" t="search"></zm-button>
            <zm-button @click="onReset" t="reset"></zm-button>
            <zm-button type="warning" @click="onGetFields">导出</zm-button>
            <zm-export
              ref="export"
              :api="exportApi()"
              type="warning"
              :params="exportForm"
              v-show="false"
            ></zm-export>
          </zm-form-item>
          <div>
            <zm-form-item label="业绩单核算状态:" prop="status">
              <zm-data-radio
                is-btn
                has-all
                :list="ACCOUNTING_STATUS"
                v-model="searchForm.status"
                @change="onSearch"
              />
            </zm-form-item>
          </div>
        </zm-form>
      </div>
      <zm-table-data
        :data="tableParams.data"
        :columns="salesManColumns"
        :fetch="loadList"
        :table-params="tableParams"
        @selection-change="saveIds"
        :mutilple="true"
      ></zm-table-data>
    </app-block>

    <export-panel
      :api="exportField()"
      v-if="exportParams.visible"
      v-model="exportParams.visible"
      @after="onExport"
      type="10"
    ></export-panel>
    <royalty-details
      v-if="isVisibleDialog"
      v-model="isVisibleDialog"
      :is-show-btn="false"
      :detail-info="info"
      @onCancel="onCancel"
      @refreshPage="onSearch"
    ></royalty-details>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import RoyaltyDetails from './components/detail/index.vue'
import {salesManColumns} from './const.js'
import {getPageList, exportField, export as commissionExport} from '@/api/src/salesmanCommission'
import {getSaleList, apartmentList} from '@/api/src/public'
import {ACCOUNTING_STATUS} from '@/model/index'
import ExportPanel from '@/components/exportFields'

export default {
  name: 'SalesmanCommission',
  components: {RoyaltyDetails, ExportPanel},
  mixins: [tableMixin],
  data () {
    return {
      ACCOUNTING_STATUS, // 业绩单核算状态
      searchForm: {
        month: '', // 月份
        apartmentId: '', // 部门ID
        salemanId: '', // 业务员ID
        status: '-1' // 状态
      },
      apartmentId: [], // 获取部门及子集id
      apartmentLists: [], // 部门下拉
      getSaleLists: [], // 业务员下拉
      selectedNos: '',
      isVisibleDialog: false,
      exportParams: {visible: false},
      exportForm: {

      },
      props: {
        label: 'name',
        value: 'value',
        children: 'children'
      },
      info: {
        id: '', // 业务员id
        month: '', // 月份
        performanceId: '' // 绩效id
      }// 传入的详情对象信息
    }
  },
  computed: {
    salesManColumns () {
      return salesManColumns(this)
    }
  },
  created () {
    this.init()
  },
  methods: {
    // 初始化
    init () {
      this.getNowMonth()
      this.GetApartmentList()
      this.getGetSaleList()
    },
    exportApi () {
      return commissionExport
    },
    onGetFields () {
      this.exportParams.visible = true
    },
    exportField () {
      return exportField
    },
    async onExport (fields) {
      this.exportForm = {...this.searchForm, ...{ids: this.selectedNos, tabType: 'second'}, ...{fields: fields}}
      this.$refs.export.onExport()
    },
    saveIds (selection, row) {
      // 保存已选
      this.selectedNos = selection.map(item => item.id).join(',')
      console.log(this.selectedNos, 'this.selectedNos')
    },
    // 加载表格数据
    async loadList () {
      const _res = await getPageList(this.assignQuery({...this.searchForm, tabType: 'second'}))
      this.initialTableData(_res.list, _res.count)
    },
    // 获取部门下拉
    async GetApartmentList () {
      this.apartmentLists = await apartmentList()
    },
    // 获取所选部门id
    apartmentChange () {
      this.searchForm.apartmentId = this.apartmentId[(this.apartmentId.length - 1)]
    },
    // 获取业务员下拉
    async getGetSaleList () {
      this.getSaleLists = await getSaleList({userType: '3'})
    },
    // 重置
    onReset () {
      if (this.$refs.searchFormRef) {
        this.$refs.searchFormRef.resetFields()
        this.apartmentId = []
        this.searchForm.month = ''
        this.onSearch()
      }
    },
    // 获取当前的上一月
    getNowMonth () {
      var now = new Date()
      var year = now.getFullYear()
      var month = now.getMonth()
      if (month === 0) {
        month = 12
      }
      month = month.toString().padStart(2, '0')
      var defaultMonth = `${year}-${month}`
      // this.$set(this.searchForm, 'month', defaultMonth)
      this.searchForm.month = defaultMonth
    },
    // 详情
    onDetail (row) {
      this.info.id = row.salemanId
      this.info.month = row.month
      this.info.performanceId = row.id
      this.isVisibleDialog = true
    },
    onCancel (val) {
      this.isVisibleDialog = val
    }
  }
}
</script>

<style scoped>
.salesman-commission__h3 {
  margin-top: 0px;
}</style
>>
